<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>饼状图的制作</title>
	<script src="d3/d3.v3.min.js" charset="utf-8"></script>
	
</head>
<body>

</body>
<script type="text/javascript">


//画布大小
var width = 400;
var height = 400;

//在 body 里添加一个 SVG 画布   
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var dataset = [ 30 , 10 , 43 , 55 , 13 ];
var pie = d3.layout.pie();
var piedata = pie(dataset);
//console.log(piedata);

var outerRadius = 150; //外半径
var innerRadius = 0; //内半径，为0则中间没有空白

var arc = d3.svg.arc()  //弧生成器
    .innerRadius(innerRadius)   //设置内半径
    .outerRadius(outerRadius);  //设置外半径
//console.log(arc);

var arcs = svg.selectAll("g")
    .data(piedata)
    .enter()
    .append("g")
    .attr("transform","translate("+ (width/2) +","+ (width/2) +")");
//console.log(arcs);

var color = d3.scale.category10();   //有十种颜色的颜色比例尺
arcs.append("path")
    .attr("fill",function(d,i){
        return color(i);
    })
    .attr("d",function(d){
        return arc(d);   //调用弧生成器，得到路径值
    });

arcs.append("text")
    .attr("transform",function(d){
        return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor","middle")
    .text(function(d){
        return d.data;
    });




</script>
</html>
